<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<div id="app">
	<!-- 如果要使用组件，直接把组件的名称，以HTML 标签的形式，引入到页面中，即可 -->
	<my-com1></my-com1>
	<my-com2></my-com2>
	<my-com3></my-com3>
</div>
<template id="tmpl1">
	<div>
		<h2>这个是第三种方式创建的组件</h2>
		<span>hello</span>
	</div>
</template>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
	// 1.1.使用Vue.extend 来创建全局的Vue组件
	var com1 = Vue.extend({
		template : '<h3>这是使用 Vue.extend 创建的组件</h3>' // 通过 template 属性，指定了组件要展示的HTML结构
	})
	// 1.2.使用Vue.component('组件的名称', 创建出来的组件模板对象)
	// 如果使用 Vue.component 定义全局组件的时候，组件名称使用了驼峰命名，则在引用组件的时候，需要把大写的驼峰改为小写的字母，同时，两个单词之前，使用 - 链接
	// 如果不使用驼峰，则直接拿名称来使用即可
	Vue.component('myCom1', com1)

	// 注意：不论是哪种方式创建出来的组件，组件的template属性指向的模板内容，必须有且只能有唯一的一个根元素
	Vue.component('myCom2', {
		template : '<div><h3>hello vue组件</h3><span>开心就好</span></div>'
	})

	Vue.component('myCom3', {
		template : '#tmpl1'
	})
	var app = new Vue({
		el:'#app',
		data:{}
	})
</script>
</body>
</html>